

import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { ProFormText, ProFormDateTimePicker, ProFormSelect } from '@ant-design/pro-components';
import './index.less';
import { Table, Input, Button } from 'antd';
import { request } from 'umi';
import '@/pages/work/work4/work4.less';
export default function applyLeave() {
  const [apply, setApplys] = useState([]); //  总数据渲染
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: '_id',
      width: 40,
      render: (text: any, record: any, index: any) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '流程编号',
      key: 'anumber',
      width: 200,
      dataIndex: 'anumber',
      ellipsis: true,
    },
    {
      title: '流程名称',
      dataIndex: 'technological',
      key: 'technological',
      ellipsis: true,
      width: 200,
    },
    {
      title: '节点名称',
      dataIndex: 'prodepartment',
      key: 'prodepartment',
      ellipsis: true,
      width: 100,
    },
    {
      title: '抄送人',
      dataIndex: 'aname',
      key: 'aname',
      ellipsis: true,
      width: 100,
    },
    {
      title: '抄送日期',
      dataIndex: 'applyTime',
      key: 'applyTime',
      ellipsis: true,
      width: 100,
    },
  ]);
  const [components, setComponents] = useState({});
  const stateData = () => {
    request('/api/ljf/apply').then((res) => {
      setApplys(res.apply);
    });
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  };
  useEffect(() => {
    stateData();
  }, []);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
      (e: any, { size }: any) => {
        const nextColumns = [...columns];
        nextColumns[index] = {
          ...nextColumns[index],
          width: size.width,
        };
        setAcolumns(nextColumns);
      };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button>新增</button>
        <button>修改</button>
        <button>删除</button>
        <button>过滤</button>
        <button>还原</button>
        <button>打印</button>
        <button>导入</button>
        <button>导出</button>
        <button>查看日志</button>
      </div>
      <div className="applyLeaveContent">
        <h1>直接进账</h1>
        <div className="table">
          <Table
            components={components}
            columns={columns}
            pagination={false}
            bordered
            rowKey="_id"
            scroll={{
              // x: 1278,
              y: 460,
            }}
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                onClick: (e) => {
                  let tr = e.target?.parentNode;
                  for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                    tr.parentNode.childNodes[i].style.color = 'black';
                  }
                  tr.style.color = '#e17009';
                },
              };
            }}
            dataSource={apply}
          />
        </div>
    
      </div>
    </div>
  )
}